<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>


	<script type="text/javascript">
		$(function () {
			$("#brand").select2();//增加页面商品（多个）
			$("#TbSpecification").select2();//增加页面规格（多个）
			$("#brandId").select2();//修改页面商品（多个）
			$("#TbSpecificationId").select2();//修改页面规格（多个）
			getData();
		})

		function getData() {
			$.ajax({
				url: "/tbTypeTemplateController/getFindAlls",
				type: "post",
				dataType: "json",
				data: {name : $("#aaa").val()},
				async: true,
				success: function (page) {
					var SpecificPrint = page.data;
					var table = "<table class=\"table table-bordered table-striped table-hover dataTable\">";
					table += "<tr>";
					table += "<th></th>";
					table += "<th class=\"sorting_asc\">模板ID</th>";
					table += "<th class=\"sorting\">分类模板名称</th>";
					table += "<th class=\"sorting\">关联品牌</th>";
					table += "<th class=\"sorting\">关联规格</th>";
					table += "<th class=\"sorting\">扩展属性</th>";
					table += "<th class=\"text-center\">操作</th>";
					table += "</tr>";
					$(SpecificPrint).each(function (i,e) {
						var specIds = JSON.parse(e.specIds);
						var spec = "";
						$(specIds).each(function (i, e) {
							spec += e.text + ",";
						})
						spec = spec.substring(0, spec.length - 1);
						//组装brandIds
						var brandIds = JSON.parse(e.brandIds);
						var brand = "";
						$(brandIds).each(function (i, e) {
							brand += e.text + ",";
						})
						brand = brand.substring(0, brand.length - 1);
						//组装customAttributeItems
						var customAttributeItems = JSON.parse(e.customAttributeItems);
						var customAttributeItem = "";
						$(customAttributeItems).each(function (i, e) {
							customAttributeItem += e.text + ",";
						})
						customAttributeItem = customAttributeItem.substring(0, customAttributeItem.length - 1);
						table += "<tr>";
						table += "<td><input  name='box' type='checkbox' value='" + e.id + "'></td>";
						table += "<td>" + e.id + "</td>";
						table += "<td>" + e.name + "</td>";
						table += "<td>" + spec + "</td>";
						table += "<td>" + brand + "</td>";
						table += "<td>" + customAttributeItem + "</td>";
						table += "<td><button type='button' class='btn bg-olive btn-xs' data-toggle='modal' onclick='toUpdate(" + e.id + ")' data-target='#updateModal'  >修改</button></td>"
						table += "</tr>";
					})
					table += "</table>";
					$("#dataList").html(table);

				},
				error: function () {
					alert("系统异常，请联系管理员");
				}
			})
		}


		function saveTbTypeTemplate() {
			//定义一个数组，储存扩展属性
			var result = [];
			$("#addTableId").find("tr").each(function(i,e){
				if(i!=0){
					var tdArr = $(this).children();
					var customAttributeItems = tdArr.eq(1).find("input").val();
					var obj = {text:customAttributeItems};
					result.push(obj);
				}
			})

			var brandIds=$("#brand").select2("data");
			var brandList=[];
			$(brandIds).each(function (i,e) {
				brandList.push({id:e.id,text:e.text});
			})

			var specIds=$("#TbSpecification").select2("data");
			var specIdsList=[];
			$(specIds).each(function (i,e) {
				specIdsList.push({id:e.id,text:e.text});
			})

			if(brandList.length <= 0){
				alert("请添加关联品牌");
				return;
			}
			if(specIdsList.length <= 0){
				alert("请添加关联规格");
				return;
			}
			$.ajax({
				url:"/tbTypeTemplateController/saveTbTypeTemplate",
				type:"get",
				datatype:"json",							//自带拼接
				data:{name:$("[name=name]").val(),specIds:JSON.stringify(specIdsList),brandIds:JSON.stringify(brandList),customAttributeItems:JSON.stringify(result)},//将数组对象转成JSON格式的字符串
				async:true,
				success:function(result){
					alert(result.member+","+result.content+","+JSON.stringify(result.data));
					getData();
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

		function addTable() {
			var atr='<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td><td><input class="form-control" placeholder="属性名称" ></td><td><button onclick="deleteTable(this)" type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
			$("#addTableId").append(atr);
		}

		function deleteTable(obj) {
			$(obj).parent().parent().remove();
		}



		function deleteTbTypeTemplate(){
			//获取点中复选框
			var boxs=document.getElementsByName("box");
			var ids="";
			for (var i = 0; i < boxs.length; i++) {
				if(boxs[i].checked){
					ids+=",'"+boxs[i].value+"'";
				}
			}
			ids=ids.substring(1);
			$.ajax({
				url:"/tbTypeTemplateController/deleteTbTypeTemplate",
				type:"get",
				datatype:"json",
				data:{ids:ids},
				async:true,
				success:function(result){
					alert(result.member+","+result.content+","+JSON.stringify(result.data));
					getData();
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

		//回显
		function toUpdate(id) {
			var q="";
			$.ajax({
				url:"/tbTypeTemplateController/toUpdate",
				type:"get",
				datatype:"json",
				data:{id:id},
				async:true,
				success:function(result){

					$("#typrId").val(result.id);
					$("#name").val(result.name);

					var brandId=JSON.parse(result.brandIds); //将字符串转成JSON对象

					for(var i =0; i <brandId.length;i++){

						$("#brandId").append(new Option(brandId[i].text,brandId[i].id,false,true));
					}
					$("#brandId").trigger("change");

					var specIds=JSON.parse(result.specIds);
					for(var v=0;v<specIds.length;v++){

						$("#TbSpecificationId").append(new Option(specIds[v].text,specIds[v].id,false,true));
					}
					$("#TbSpecificationId").trigger("change");

					var Attribute=[];
					Attribute=JSON.parse(result.customAttributeItems);
					for(var e=0;e<Attribute.length;e++){
						q+='<tr><td><input type="checkbox" class="icheckbox_square-blue" >' +
								'</td><td><input value="'+Attribute[e].text+'" class="form-control" placeholder="属性名称" >' +
								'</td><td><button type="button" onclick="deleteTr(this)" class="btn btn-default" title="删除">' +
								'<i class="fa fa-trash-o"></i> 删除</button></td></tr>';
					}
					$("#Theecho").html(q);
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

		function addTables() {
			var atr='<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td><td>' +
					'<input class="form-control" placeholder="属性名称" >' +
					'</td><td><button onclick="deleteTable(this)" type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o">' +
					'</i> 删除</button></td></tr>';
			$("#ccc").append(atr);
		}


		//确认修改
		function updateTbTypeTemplate() {
			var result = [];
			$("#ccc").find("tr").each(function(i,e){
				if(i!=0){
					var tdArr = $(this).children();
					var customAttributeItems = tdArr.eq(1).find("input").val();
					var obj = {text:customAttributeItems};
					result.push(obj);
				}
			})
			var brandIds=$("#brandId").select2("data");
			var brandList=[];
			$(brandIds).each(function (i,e) {
				brandList.push({id:e.id,text:e.text});
			})
			var specIds=$("#TbSpecificationId").select2("data");


			var TbSpecificationList=[];
			$(specIds).each(function (i,e) {
				TbSpecificationList.push({id:e.id,text:e.text});
			})

			if(brandList.length <= 0){
				alert("请添加关联品牌");
				return;
			}
			if(TbSpecificationList.length <= 0){
				alert("请添加关联规格");
				return;
			}
			$.ajax({
				url:"/tbTypeTemplateController/updateTbTypeTemplate",
				type:"get",
				datatype:"json",
				data:{id:$("#typrId").val(),name:$("#name").val(),specIds:JSON.stringify(TbSpecificationList),brandIds:JSON.stringify(brandList),customAttributeItems:JSON.stringify(result)},
				async:true,
				success:function(result){
					alert(result.member+","+result.content+","+JSON.stringify(result.data));
					getData();
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

	</script>
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
                    <div class="box-header with-border">
                        <h3 class="box-title">商品类型模板管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" onclick="deleteTbTypeTemplate()"><i class="fa fa-trash-o"></i> 删除</button>
                                       
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                  分类模板名称：<input  id="aaa" name="aaa">
									<button class="btn btn-default" onclick="getData()">查询</button>
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                  </table>
			                  <!--数据列表/-->                        
							  
							 
                        </div>
                        <!-- 数据表格 /-->
                        
                        
                        
                        
                     </div>
                    <!-- /.box-body -->
                    
	           
					    
                                
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品类型模板编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>商品类型</td>
		      		<td><input  class="form-control" placeholder="商品类型" name="name">  </td>
		      	</tr>			   
		      	<tr>
		      		<td>关联品牌</td>
		      		<td>
						<select id="brand" name="brand" style="width:100%" multiple>
							<option th:each="brand:${tbBrands}" th:value="${brand.id}" th:text="${brand.name}"></option>
						</select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>关联规格</td>
		      		<td>
						<select id="TbSpecification" name="TbSpecification" style="width:100%" multiple>
							<option th:each="br:${tbSpecifications}" th:value="${br.id}" th:text="${br.specName}"></option>
						</select>
		      		</td>
		      	</tr>	
		      	
		      	<tr>
		      		<td>扩展属性</td>
		      		<td>
		      			<div class="btn-group">
                             <button type="button" onclick="addTable()" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
                                                                    
                        </div>
						<table class="table table-bordered table-striped"  width="800px" id="addTableId">
							<thead>
							<tr>
								<td><input type="checkbox" class="icheckbox_square-blue"></td>
								<td>属性名称</td>
								<td>操作</td>
							</tr>
							</thead>
							<tbody>

							</tbody>
						</table>

					</td>
		      	</tr>	
		      	      
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="saveTbTypeTemplate()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>


  <!-- 修改编辑窗口 -->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabels">商品类型模板修改</h3>
			  </div>
			  <div class="modal-body">
				  <input type="hidden" id="typrId">
				  <table class="table table-bordered table-striped"  width="800px">
					  <tr>
						  <td>商品类型</td>
						  <td><input  class="form-control" placeholder="商品类型" id="name">  </td>
					  </tr>
					  <tr>
						  <td>关联品牌</td>
						  <td>
							  <select  id ="brandId" name="brandId" style="width:100%" multiple>
								  <option th:each="brand:${tbBrands}" th:value="${brand.id}" th:text="${brand.name}"></option>
							  </select>
						  </td>
					  </tr>
					  <tr>
						  <td>关联规格</td>
						  <td>
							  <select  id="TbSpecificationId" name="TbSpecificationId" style="width:100%" multiple>
								  <option th:each="br:${tbSpecifications}" th:value="${br.id}" th:text="${br.specName}"></option>
							  </select>
						  </td>
					  </tr>

					  <tr>
						  <td>扩展属性</td>
						  <td>
							  <div class="btn-group">
								  <button type="button" onclick="addTables()" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>

							  </div>
							  <table class="table table-bordered table-striped"  width="800px" id="ccc">
								  <thead>
								  <tr>
									  <td><input type="checkbox" class="icheckbox_square-blue"></td>
									  <td>属性名称</td>
									  <td>操作</td>
								  </tr>
								  </thead>
								  <tbody id="Theecho">
								  </tbody>
							  </table>

						  </td>
					  </tr>

				  </table>

			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateTbTypeTemplate()">保存</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>

</body>

</html>